<template>
  <div class="order_info_page">
    <div class="order_info">
      <p v-for="(item,index) in orderInfo" :key="index">
        <span>{{ item.name }}:</span>
        <span>{{ item.value }}</span>
      </p>
    </div>
    <div class="detail_title">
      商品信息
    </div>
    <div
      v-for="(item,index) in shopList"
      :key="index"
      class="goods_list"
    >
      <div class="good_details">
        <ul>
          <li>
            <img :src="item.image">
          </li>
          <li>
            <p>{{ item.productName }}</p>
            <p>{{ item.skuValue }}</p>
            <p>SKU: {{ item.sku }}</p>
          </li>
          <li>
            <p>¥{{ item.productPrice*item.number }}</p>
            <p>¥{{ `${item.productPrice}*${item.number}` }}</p>
          </li>
          <li> ¥{{ item.total }}</li>
        </ul>
      </div>
    </div>
    <div class="total">
      <ul>
        <li />
        <li />
        <li />
        <li>
          <p><span>订单总金额</span> <span>¥{{afterDetails.orderPrice}}</span> </p>
          <p><span>物流费用</span>  <span>¥{{afterDetails.logisticsPrice}}</span></p>
          <!-- <p><span>平台优惠(618活动)</span> <span>-¥100</span></p> -->
          <p><span>实付</span> <span>¥{{afterDetails.price}}</span></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { orderGetById } from '@/api/order'
export default {
  data() {
    return {
      orderInfo: [
        { name: '订单ID', value: '', field: 'orderFormid' },
        { name: '支付单号', value: '', field: 'transactionId' },
        { name: '订单状态', value: '', field: 'state' },
        { name: '售后状态', value: '', field: 'afterStateName' }
      ],
      shopList: [],
      afterDetails: ''
    }
  },
  computed: {
    query() {
      return this.$route.query
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    async getDetails() {
      console.log(this.query)
      const res = await orderGetById({ orderId: this.query.info.orderId })
      if (res.code === '') {
        this.afterDetails = res.data
        const o = res.data
        this.getOrderInfo(o)
        this.shopList = o.products
      }
    },
    getOrderInfo(o) {
      const state = {
        1: '待付款 ',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        5: '已关闭'
      }

      this.orderInfo.map(item => {
        item.value = o[item.field] || ''
        if (item.field === 'state') {
          item.value = state[item.value]
        }
      })
    },
  }
}
</script>

<style lang='less' scoped>
.order_info_page {
  .order_info {
    overflow: hidden;
    p {
    width: 50%;
    float: left;
    margin-bottom: 25px;
    span {
      font-size: 16px;
      color: #333333;
      display: inline-block;
       &:nth-of-type(1) {
        width:130px;
      }
      &:nth-of-type(2) {
        color:#666666;
      }
    }
  }
  }
  .detail_title {
    font-size: 24px;
    color: #333333;
    position: relative;
    margin:50px 20px 20px;
    &:before {
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        left: -20px;
        width: 4px;
        height: 24px;
        background-color: #3A68F2;
    }
  }
  .goods_list {
    .good_details {
        border-bottom: 1px #E0E5EB solid;
        ul {
            overflow: hidden;
            display: flex;
            margin: 0;
            padding: 30px 0;
            list-style: none;
            li {
                flex:4;
                display: flex;
                // justify-content: center;
                // align-items: center;
                text-align: left;
                img {
                width: 90px;
                height: 90px;
                border-radius:4px;
                font-size: 16px;
                color: #333333;
                }
                &:nth-child(2){
                  display: block;
                  margin-right: 100px;
                }
                &:nth-child(3) {
                display: block;
                }
                &:nth-child(3) {
                p {
                    // text-align: center;
                    &:nth-child(1) {
                    font-weight: 600;
                    }
                    &:nth-child(2) {
                    font-size: 12px;
                    }
                }
                }
                &:nth-child(4) {
                font-weight: 600;
                }
                p {
                    margin: 0;
                    padding: 0;
                    height: auto;
                    line-height: 30px;
                }
            }
        }
    }
  }
  .total {
      padding-left: 20px;
      ul {
        margin: 0;
        padding: 30px 0;
        display: flex;
        list-style: none;

      li {
          // height: 40px;
          flex:3;
          font-size: 16px;
          color: #333333;
          // justify-content: center;
          // align-items: center;
          &:nth-child(4) {
          // font-weight: 600;
          }
          p {
            margin: 0;
            padding: 0;
            height: 30px;
            line-height: 30px;
            width: 100%;
            clear: both;
            span {
              display: inline-block;
              float: left;
              &:nth-of-type(1) {
                width: 40%;
                margin-right: 10%;
              }
              &:nth-of-type(2) {
                width: 50%;
                font-weight: 600;
              }
            }
          }
      }
      }
  }
}
</style>
